import React, {Component} from 'react';

require('./css/frame.css');


const tipArya=[
  <div>
    <img src={require('./img/20_a1.jpg')} style={{textAlign:'center'}}/>
    <p>1 - 进入及起动系统接口 -J965-</p>
  </div>,
  <div>
    <img src={require('./img/20_a2.jpg')}/>
    <p>2 - 电子转向柱锁控制单元 -J764-</p>
  </div>,
  <div>
    <img src={require('./img/20_a3.jpg')}/>
    <p>3 - 防盗锁止系统读取线圈 -D2-</p>
  </div>,
  <div>
    <img src={require('./img/20_a4.jpg')}/>
    <p>4 - 车载电网控制单元 -J519-<br></br>带中央门锁和防盗报警装置天线 -R47-</p>
  </div>,
<div>
    <img src={require('./img/20_a5.jpg')}/>
  <p>5 - 起动装置按钮 -E378-</p>
  </div>

];
const tipAryb=[
  <div>
    <img src={require('./img/20_b1.jpg')}/>
    <ul style={{paddingLeft:10}}>
      <li>副驾驶员侧车门外把手；</li>
      <li>带副驾驶员侧车门外把手接触传感器 -G416-；</li>
      <li>带副驾驶员侧进入及起动系统天线 -R135-</li></ul>
  </div>,
  <div>
    <img src={require('./img/20_b2.jpg')}/>
    <p>车内空间进入及起动系统天线 1 -R138-</p>
  </div>,
  <div>
    <img src={require('./img/20_b4.jpg')}/>
    <p>进入及起动系统接口 -J965-</p>
  </div>,
  <div>
    <img src={require('./img/20_b3.jpg')}/>
    <ul style={{paddingLeft:10}}>
      <li>驾驶员侧车门外把手；</li>
      <li>带驾驶员侧车门外把手接触传感器 -G415-；</li>
      <li>带驾驶员侧进入及起动系统天线 -R134-</li>
    </ul>
  </div>,
   <div>
   <img src={require('./img/20_c3.jpg')}/>
   <p>后部保险杠内的进入及起动许可天线 -R136-</p>
 </div>

];
const tipAryc=[
  <div>
    <img src={require('./img/20_c11.jpg')}/>
    <p>车内空间进入及起动系统天线 2 -R139-</p>
  </div>,
  <div>
    <img src={require('./img/20_c1.jpg')}/>
    <p>行李厢内进入及起动系统天线 -R137</p>
  </div>,
  <div>
    <img src={require('./img/20_c2.jpg')}/>
    <ul style={{paddingLeft:10}}>
      <li>行李厢盖开启控制单元 -J938-</li>
      <li>带行李厢盖开启装置传感器 -G750-</li>
      <li>行李厢盖开启装置传感器 2 -G760-</li>
    </ul>
  </div>,
 
];

export default class P20 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: [1, 0,0],
      flag: 'none',
    };
  }

  onSlider(i) {
    let index = [0, 0,0];
    index[i] = 1;
    this.setState({
      index
    });
  }


  render() {
    const {index} = this.state;
    return (
      <div id="page">
        <div className="content" id="box20">
          <h4 className="title">舒适系统- KESSY 系统组成 </h4>
          <div className='infodiv'>请滑动页面中的热点，查看Kessy 系统组成介绍。</div>

          {index[0] === 1 && <div className='box20Cont' id='box200'>

            <ul>
              <li>1 - 进入及起动系统接口 -J965-</li>
              <li>2 - 电子转向柱锁控制单元 -J764-</li>
              <li>3 - 防盗锁止系统读取线圈 -D2-</li>
              <li>4 - 车载电网控制单元 -J519-<br></br>
                带中央门锁和防盗报警装置天线 -R47-</li>
              <li>5 - 起动装置按钮 -E378-</li>
            </ul>


            <img src={require('./img/20_0_03.jpg')} style={{marginTop: 40}}/>

            <CircleImg style={{left: '485', top: '390'}} cpm={tipArya[0]}/>
            <CircleImg style={{left: '510', top: '380'}} cpm={tipArya[1]}/>
            <CircleImg style={{left: '550', top: '390'}} cpm={tipArya[2]}/>
            <CircleImg style={{left: '550', top: '420'}} cpm={tipArya[3]}/>
            <CircleImg style={{left: '520', top: '405'}} cpm={tipArya[4]}/>

          </div>}

          {index[1] === 1 && <div className='box4Cont' id='box91'>
            <img src={require('./img/20_1_03.jpg')} style={{marginTop: 40}}/>
            <CircleImg style={{left: '780', top: '360'}} cpm={tipAryb[0]}/>
            <CircleImg style={{left: '280', top: '370'}} cpm={tipAryb[1]}/>
            <CircleImg style={{left: '280', top: '350'}} cpm={tipAryb[2]}/>
            <CircleImg style={{left: '330', top: '360'}} cpm={tipAryb[3]}/>

            <CircleImg style={{left: '600', top: '410'}}  cpm={tipAryb[4]}/>
          </div>}

          {index[2] === 1 && <div className='box4Cont' id='box92'>
            <img src={require('./img/20_2_03.jpg')} style={{marginTop: 40}}/>
            <CircleImg style={{left: '515', top: '350'}}  cpm={tipAryc[0]}/>
            <CircleImg style={{left: '570', top: '350'}}  cpm={tipAryc[1]}/>
            <CircleImg style={{left: '600', top: '330'}}  cpm={tipAryc[2]}/>
            
          </div>}

          <div id="csld" className="sldcir" style={{left: 425}}>
            {index.map((item, i) => {
              let sr = (item === 1 ? 'son' : 'soff');
              return (
                <img key={i} src={require('./img/' + sr + '.png')} onClick={this.onSlider.bind(this, i)}/>);
            })}
          </div>

        </div>
      </div>
    );
  }
}



import pc from './lib/Browser';


const subx=20,suby=130;
class CircleImg extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      show: false,
      pos: {left: '0px', top: '300px'},
      str: '',
    }
  }

  onOver(e) {
    if (!pc()){
      return;
    }
    const {style, data} = this.props;
    let ix = parseInt(style.left)-subx;
    let iy = parseInt(style.top)-suby;

    this.setState(
      {show: true,},
      () => {
        let tip = document.querySelector("#tipCirle");
        //document.querySelector("#tipcont").innerHTML = data;
        let h = tip.offsetHeight;
        let w = tip.offsetWidth;
        tip.style.left = ix - w / 2 + 20 + 'px';
        tip.style.top = iy - h - 30 + 'px';
      });
  }

  onOut() {
    if (!pc()){
      return;
    }
    this.setState({
      show: false,
    })
  }

  onClick() {
    if (!pc()) {
      let {show} = this.state;
      if (!show) {
        const {style, data} = this.props;
        let ix = parseInt(style.left)-subx;
        let iy = parseInt(style.top)-suby;

        this.setState(
          {show: true,},
          () => {
            let tip = document.querySelector("#tipCirle");
            //document.querySelector("#tipcont").innerHTML = data;
            let h = tip.offsetHeight;
            let w = tip.offsetWidth;
            tip.style.left = ix - w / 2 + 20 + 'px';
            tip.style.top = iy - h - 30 + 'px';
          });
      }else{
        this.setState(
          {show: false}
        )
      }
    }else{
      return false;
    }
  }


  render() {
    const {style,cpm} = this.props;
    const {show } = this.state;
    return (
      <div>
        <img
          src={require("./img/red0.png")}
          className="circle"
          style={{left:style.left-subx,top:style.top-suby}}
          onClick={this.onClick.bind(this)}
          onMouseOver={this.onOver.bind(this)}
          onMouseOut={this.onOut.bind(this)}
        />
        {show &&
        (<div className="tips" style={{textAlign:style.textAlign}} id="tipCirle" >
          <span id="bot"></span>
          <div id="tipcont">
            {cpm}
          </div>
        </div>)
        }
      </div>

    );
  }

}





